<template>
  <div class="layui-form">
    <div class="layui-row">
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">请求方式</label>
          <div class="layui-input-block">
            <select
              lay-filter="getMethod"
              lay-event="getMethod"
              :lay-select="interfaceInfo.method"
            >
              <option value="">请选择</option>
              <option value="POST">POST</option>
              <option value="GET">GET</option>
              <option value="PUT">PUT</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-form-item">
          <label class="layui-form-label">头部参数</label>
          <div class="layui-input-block">
            <input
              type="text"
              maxlength="800"
              v-model.trim="interfaceInfo.header"
              class="layui-input"
            />
          </div>
        </div>
      </div>
      <div class="layui-col-md5">
        <div class="layui-form-item">
          <label class="layui-form-label">携带参数</label>
          <div class="layui-input-block">
            <input
              type="text"
              maxlength="1000"
              v-model.trim="interfaceInfo.params"
              class="layui-input"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="layui-row">
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">接口协议</label>
          <div class="layui-input-block">
            <select
              lay-filter="getWay"
              lay-event="getWay"
              :lay-select="interfaceInfo.way"
            >
              <option value="">请选择</option>
              <option value="http">http</option>
              <option value="https">https</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">调用方式</label>
          <div class="layui-input-block">
            <select
              lay-filter="getStrategy"
              lay-event="getStrategy"
              :lay-select="interfaceInfo.strategy"
            >
              <option value="">请选择</option>
              <option value="host">主机IP调用</option>
              <option value="service">负载均衡调用</option>
            </select>
          </div>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">IP或服务名</label>
          <div class="layui-input-block">
            <input
              type="text"
              maxlength="50"
              v-model.trim="interfaceInfo.host"
              class="layui-input"
            />
          </div>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">服务端口</label>
          <div class="layui-input-block">
            <input
              type="text"
              v-model.trim="interfaceInfo.port"
              class="layui-input"
              maxlength="5"
            />
          </div>
        </div>
      </div>
      <div class="layui-col-md3">
        <div class="layui-form-item">
          <label class="layui-form-label">接口地址</label>
          <div class="layui-input-block">
            <input
              type="text"
              maxlength="300"
              v-model.trim="interfaceInfo.interfacePath"
              class="layui-input"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "InterfaceConfig",
  props: {
    config: Object,
  },
  data() {
    return {
      interfaceInfo: {},
    };
  },
  mounted: function () {
    this.interfaceInfo = this.$props.config;
    if (this.checkIsNull(this.interfaceInfo)) {
      this.interfaceInfo = {};
    }
    this.initInnerLayui();
  },
  methods: {
    getData: function () {
      return this.interfaceInfo;
    },
    checkNodeInfo: function (info) {
      if (this.checkIsNull(info)) {
        info = "";
      }
      if (this.checkIsNull(this.interfaceInfo.method)) {
        this.showMsg(info + "请选择请求方式");
        return false;
      }
      if (this.checkIsNull(this.interfaceInfo.way)) {
        this.showMsg(info + "请选择请求协议");
        return false;
      }
      if (this.checkIsNull(this.interfaceInfo.host)) {
        this.showMsg(info + "请输入IP或服务名");
        return false;
      }
      if (this.checkIsNull(this.interfaceInfo.strategy)) {
        this.showMsg(info + "请选择调用方式");
        return false;
      }
      return true;
    },
    initInnerLayui: function () {
      var that = this;
      layui.use("form", function () {
        var form = layui.form;
        form.render();
        form.on("select(getMethod)", function (obj) {
          that.interfaceInfo.method = obj.value;
        });
        form.on("select(getWay)", function (obj) {
          that.interfaceInfo.way = obj.value;
        });
        form.on("select(getStrategy)", function (obj) {
          that.interfaceInfo.strategy = obj.value;
        });
      });
    },
  },
  updated: function () {
    this.initInnerLayui();
  },
};
</script>